<template>
    <div class="friend f f-ac f-jc">
        <div class="friend-body f f-col f-jc">
            <div class="friend-body-title">友情链接</div>
            <div class="friend-body-link">
                <div v-for="(i, k) in dataList" :key="k" @click="handleLink(i)">
                    <img :src="baseUrl+i.image" alt="" mode="widthFix">
                    <div v-if="i.name">{{i.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        friendly
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                dataList: [],
            };
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取传承人列表
            getList() {
                let that = this
                friendly().then((response) => {
                    that.dataList = response.data.list
                });
            },
            // 链接跳转
            handleLink(v) {
                window.open(v.link, "_block");
            },
        },
    };
</script>

<style lang="scss" scoped>
    .friend {
        width: 100%;
        height: 405px;
        background-image: url("../../../assets/friend.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #fff;

        &-body {
            width: 1300px;
            height: 100%;
            overflow: hidden;

            &-title {
                font-size: 22px;
                color: #000;
                font-weight: 600;
            }

            &-link {
                margin-top: 20px;
                display: flex;

                >div {
                    display: flex;
                    width: 250px;
                    height: 60px;
                    text-align:center;
                    margin-right: 120px;

                    .image {
                        width: 250px;
                        height: 60px;
                    }

                    &:hover {
                        cursor: pointer;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>